import { useState, useEffect } from 'react';
import moment from 'moment'
import { Button } from 'antd'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import calendar from '@js/calendar'
import style from './index.module.less'
import classNames from 'classnames'

interface ItemSchema {
  date: string
  day: number
  IDayCn: string
  Term: string | null
  festival: string | null
  lunarFestival: string | null
}

function // 格式化数字
formatDouble (num: number): string {
  let ns = num >= 10 ? num : '0' + num
  return `${ns}`
}

function preMonth (
  year: number,
  month: number,
  date: number,
  setYear: (v: number) => void,
  setMonth: (v: number) => void,
  setDate: (v: number) => void,
  setDateList: (v: Array<ItemSchema | null>) => void,
  changeHandle: (v: string) => void
) {
  let m = formatDouble(month + 1)
  const t = moment(`${year}-${m}-${date}`)
  t.subtract(1, 'month')
  setYear(t.year())
  setMonth(t.month())
  setDate(t.date())
  initDayList(t.year(), t.month(), setDateList)
  triggerChangeHandle(t.year(), t.month(), t.date(), changeHandle)
}

// 触发日期改变回调函数
function triggerChangeHandle (year: number, month: number, date: number, changeHandle: (v: string) => void) {
  const t = moment()
  t.year(year)
  t.month(month)
  t.date(date)
  changeHandle(t.format('YYYY-MM-DD'))
}

// 初始化日期列表
function initDayList (year: number, month: number, setDateList: (v: Array<ItemSchema | null>) => void) {
  const t = moment()
  const list: Array<ItemSchema | null> = []
  t.year(year)
  t.month(month)
  t.add(1, 'month')
  t.date(1)
  t.subtract(1, 'd')
  const max = t.date()
  t.date(1)
  year = t.year()
  month = t.month() + 1
  const day = t.day()
  for (let i = 0; i < day; i++) {
    list.push(null)
  }
  for (let i = 1; i <= max; i++) {
    const obj = calendar.solar2lunar(year, month, i)
    if (obj === -1) {
      continue
    }
    list.push({
      date: `${year}-${formatDouble(month)}-${formatDouble(i)}`,
      day: i,
      IDayCn: obj.IDayCn,
      Term: obj.Term,
      festival: obj.festival,
      lunarFestival: obj.lunarFestival
    })
  }
  setDateList(list)
}

function nextMonth (
  year: number,
  month: number,
  date: number,
  setYear: (v: number) => void,
  setMonth: (v: number) => void,
  setDate: (v: number) => void,
  setDateList: (v: Array<ItemSchema | null>) => void,
  changeHandle: (v: string) => void
 ) {
  const m = formatDouble(month + 1)
  const t = moment(`${year}-${m}-${date}`)
  t.add(1, 'month')
  setYear(t.year())
  setMonth(t.month())
  setDate(t.date())
  setYear(t.year())
  setMonth(t.month())
  setDate(t.date())
  initDayList(t.year(), t.month(), setDateList)
  triggerChangeHandle(t.year(), t.month(), t.date(), changeHandle)
}

interface Props {
  changeHandle: (v: string) => void
  tagList: string[]
}

function Main ({ changeHandle, tagList }: Props) {
  const [year, setYear] = useState(0)
  const [month, setMonth] = useState(0)
  const [date, setDate] = useState(0)
  const [dateList, setDateList] = useState<Array<ItemSchema | null>>([])
  useEffect(() => {
    const t = moment()
    setYear(t.year())
    setMonth(t.month())
    setDate(t.date())
    initDayList(t.year(), t.month(), setDateList)
  }, [])
  useEffect(() => {
    if (year) {
      triggerChangeHandle(year, month, date, changeHandle)
    }
  }, [year, month, date])
  return (
    <div className={style.container}>
      <div className={style['title-line']}>
        <span className={style['body-title__text']}>{year}年{formatDouble(month + 1)}月{formatDouble(date)}日</span>
        <div className={style['body-title__btns']}>
          <Button shape='circle' icon={<LeftOutlined />} onClick={() => preMonth(year, month, date, setYear, setMonth, setDate, setDateList, changeHandle)} />
          <Button shape='circle' icon={<RightOutlined />} onClick={() => nextMonth(year, month, date, setYear, setMonth, setDate, setDateList, changeHandle)} />
        </div>
      </div>
      <ul className={style['calendar-title-list']}>
        <li>
          <span>日</span>
        </li>
        <li>
          <span>一</span>
        </li>
        <li>
          <span>二</span>
        </li>
        <li>
          <span>三</span>
        </li>
        <li>
          <span>四</span>
        </li>
        <li>
          <span>五</span>
        </li>
        <li>
          <span>六</span>
        </li>
      </ul>
      <ul className={style['calendar-list']}>
        {dateList.map((obj, i) => {
          return obj ? (
            <li className={classNames({ [style.active]: obj.day === date, [style.tag]: tagList.includes(obj.date) })} key={obj.date} onClick={() => {
              setDate(obj.day)
            }}>
              <span className={style['calendar-li__text']}>
                <div>{obj.day}</div>
                <div>{obj.lunarFestival || obj.festival || obj.Term || obj.IDayCn}</div>
              </span>
            </li>
          ) : <li key={i}>&nbsp;</li>
        })}
      </ul>
    </div>
  )
}

export default Main
